<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>【谁调用 this 就指向谁】</title>
</head>

<body>
  <button>点击</button>
  <script>
    // 【谁调用 this 就指向谁】
    // 【谁调用 this 就指向谁】
    // 【谁调用 this 就指向谁】

    // 普通函数的调用方式决定了 this 的值，即 -->【谁调用 this 就指向谁】
    // 普通函数没有明确调用者时 this 值为 window，严格模式（'use strict'）下没有调用者时 this 的值为 undefined

    console.log(this)  // window

    function fn() {
      console.log(this)  //window
    }
    fn()  // window.fn()

    // setInterval(function () {      // window.setInterval
    //   console.log(this)  //window
    // }, 1000)

    document.querySelector('button').addEventListener('click', function () {
      console.log(this)  // 指向 button
    })

    const obj = {
      sayHi: function () {
        console.log(this)  // 指向 obj 对象
      }
    }
    obj.sayHi()
  </script>
</body>

</html>